<template>
  <div class="common-layout">
    <el-container>
      <el-header style="border-style: groove;border-width: 2px;height: 80px;">
        <el-form :inline="true" :model="can" class="demo-form-inline" style="margin-top: 20px;">
          <el-form-item label="姓名">
            <el-input v-model="can.Name" placeholder="姓名" clearable  style="width: 150px;"/>
          </el-form-item>
          <el-form-item label="审核状态">
            <el-select
              v-model="can.Status"
              placeholder="审核状态"
              clearable
            >
              <el-option label="待审核" :value="0" />
              <el-option label="已审核" :value="1" />
            </el-select>
          </el-form-item>
          <el-form-item label="请假时间">
            <el-date-picker
              v-model="can.Start"
              type="datetime"
              placeholder="开始时间"
              clearable
            />
            --
            <el-date-picker
              v-model="can.End"
              type="datetime"
              placeholder="结束时间"
              clearable
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="gettableData()">查询</el-button>
          </el-form-item>
        </el-form>
      </el-header>
      <el-main style="border-style: groove;border-width: 2px;height: 600px;margin-top: 15px;">
        <div style="margin-bottom: 15px;">
            <el-button type="primary" color="#25a1d6" @click="open('请假申请',null)" plain>请假申请</el-button>
        </div>
        <el-table :data="tableData"   style="width: 100%;height: 450px;">
            <el-table-column fixed type="index" label="序号" width="60" />
            <el-table-column prop="name" label="名称"/>
            <el-table-column prop="departName"  label="部门" />
            <el-table-column prop="typeName"  label="类别" />
            <el-table-column prop="scoped" label="请假时间" width="200">
              <template v-slot="scoped">
                <span>{{moment(scoped.row.startDateTime).format("YYYY-MM-DD")}}至{{moment(scoped.row.endDateTime).format("YYYY-MM-DD")}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="totalHour"  label="总工时">
              <template v-slot="scoped">
                <span>{{ scoped.row.totalHour*8 }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="backDateTime"  label="报到时间"  width="120">
              <template v-slot="scoped">
                <span>{{moment(scoped.row.backDateTime).format("YYYY-MM-DD")}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="reason"  label="请假事由" width="200"/>    
            <el-table-column prop="leaderName"  label="部门领导" />
            <el-table-column prop="status"  label="审批状态" >
              <template v-slot="scoped">
                <el-tag v-if="scoped.row.status==0" type="primary">待审核</el-tag>
                <el-tag v-if="scoped.row.status==1" type="info">已审核</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="remark"  label="审批意见">
              <template v-slot="scoped">
                <span v-if="scoped.row.remark==0"></span>
                <el-tag v-if="scoped.row.remark==1" type="success">通过</el-tag>
                <el-tooltip :content="scoped.row.whyRefuse" effect="customized"  v-if="scoped.row.remark==2">
                  <el-tag type="danger">不通过</el-tag>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间" width="200">
              <template v-slot="scoped">
                <span>{{moment(scoped.row.createTime).format("YYYY-MM-DD")}}</span>
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" min-width="200">
            <template #default="scoped">
                <el-button link type="primary" size="small" @click="open('修改',scoped.row)" v-if="scoped.row.status===0">
                修改
                </el-button>
                <el-button link type="primary" size="small" @click="Del(scoped.row)" v-if="scoped.row.status===0">删除</el-button>
                <el-button link type="primary" size="small" @click="open('审批',scoped.row)"  v-if="scoped.row.status===0&&((useinfo.UserInfo.RidList.includes(11)&&scoped.row.leaderName!='孙婷婷')||useinfo.UserInfo.RidList.includes(2))">审批</el-button>
            </template>
            </el-table-column>
        </el-table>
        <div class="demo-pagination-block" style="margin-top: 20px;">
            <el-pagination
            v-model:current-page="page.PageIndex"
            v-model:page-size="page.PageSize"
            :page-sizes="[15, 20, 30, 50]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.listcount"
            />
        </div>
      </el-main>
    </el-container>
  </div>

<!-- 添加请假单、审批请假单、修改请假单 -->
    <el-dialog v-model="logic.opens" :title="logic.titles" width="1000" center align-center draggable >
        <el-form
            ref="ruleFormRef"
            style="max-width: 600px"
            :model="form"
            label-width="auto"
        >
            <el-form-item label="名称" prop="name" style="width: 300px;">
            <el-input v-model="form.name" disabled/>
            </el-form-item>
            <el-form-item label="部门" >
                <el-select v-model="form.departId" placeholder="部门" @change="getleader()" disabled>
                    <el-option v-for="a in departData" :label="a.departName" :value="a.id" />
                </el-select>
            </el-form-item>
            <el-form-item label="请假类型" prop="resource" >
              <el-radio-group v-model="form.excusedType"  :disabled="logic.titles=='审批'">
                  <el-radio v-for="a in typeData" :value="a.id">{{a.typeName}}</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="请假时间" >
            <el-col :span="11">
                <el-form-item prop="date1">
                <el-date-picker
                    v-model="form.startDateTime"
                    type="datetime"
                    aria-label="Pick a date"
                    placeholder="开始时间"
                    style="width: 100%"
                    :disabled="logic.titles=='审批'"
                />
                </el-form-item>
            </el-col>
            <el-col class="text-center" :span="2">
                <span class="text-gray-500">-</span>
            </el-col>
            <el-col :span="11">
                <el-form-item prop="date2">
                <el-date-picker
                    v-model="form.endDateTime"
                    type="datetime"
                    aria-label="Pick a date"
                    placeholder="结束时间"
                    style="width: 100%"
                    @change="getDay()"
                    :disabled="logic.titles=='审批'"
                />
                </el-form-item>
            </el-col>
            </el-form-item>
            <el-form-item label="请假天数" prop="delivery" style="width: 300px;">
                <el-input v-model="form.totalHour"  :disabled="logic.titles=='审批'"/>
            </el-form-item>
            <el-form-item label="报道日期" prop="location">
                <el-form-item prop="date3">
                <el-date-picker
                    v-model="form.backDateTime"
                    type="datetime"
                    aria-label="Pick a date"
                    placeholder="报道日期"
                    style="width: 100%"
                    :disabled="logic.titles=='审批'"
                />
                </el-form-item>
            </el-form-item>
           
            <el-form-item label="请假事由" prop="desc" >
                <el-input v-model="form.reason" type="textarea"  :disabled="logic.titles=='审批'"/>
            </el-form-item>
            <el-form-item label="部门领导" prop="name" style="width: 300px;" v-if="logic.titles!='审批'">
                <el-input v-model="form.leaderName" disabled />
            </el-form-item>
            <el-form-item label="审核" prop="resource" v-if="logic.titles=='审批'" :inline="true">
              <el-radio-group v-model="form.remark">
                  <el-radio  :value="1">通过</el-radio>
                  <el-radio  :value="2">不通过</el-radio>
              </el-radio-group>
              <el-input placeholder="原因" v-model="form.whyRefuse" v-if="form.remark==2" style="width: 300px;margin-left: 20px;"></el-input>
            </el-form-item>
        </el-form>
       
        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="saveExcused()">
                提交
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>
<script lang="ts" setup>
import { onMounted, reactive, ref, watch } from 'vue'
import { ElMessage, ElMessageBox, type FormInstance } from 'element-plus'
import { readBasic, writeBasic } from '@/Helper/axiosSetting'
import{useCounterStore} from '@/stores/counter'
import moment from 'moment';
const useinfo=useCounterStore();
onMounted(()=>{
  gettableData()
})

const tableData = ref([])
//查询参数
const can=reactive({
Rolearr:[],
RidList	:useinfo.UserInfo.RidList.toString(),
DepartId		:useinfo.UserInfo.departId,	
Uid			:useinfo.UserInfo.Uid,
UserName:useinfo.UserInfo.UserName,
Start			:null,
End			:null,
Name			:"",
Status			:"",
})
//分页参数
const page=reactive({
  PageIndex	:1,
PageSize:15,
listcount:0
})
//侦听分页数据的变化，刷新列表数据
watch(page,()=>{
  gettableData()
},{deep:true})
//获取列表数据
const gettableData=()=>{
  console.log(can.RidList)
   if(moment(can.Start).isAfter(can.End)||moment(can.Start).isSame(can.End)){
    ElMessage.error("开始时间不能晚于结束时间以及开始时间和结束时间不能相同")
    return
  }
  readBasic.get("api/Excused/GetExcused",{params:{
      RidList	:can.RidList,
      DepartId:can.DepartId,	
      Uid			:can.Uid,
      UserName:can.UserName,
      Start		:can.Start,
      End			:can.End,
      Name		:can.Name,
      Status	:can.Status,
      PageIndex	:page.PageIndex,
      PageSize:page.PageSize,
  }}).then(res=>{
    tableData.value=res.data.data.list
    page.listcount=res.data.data.recordCount
  })
}


//----------------------------------------------------------保存/修改请假单-----------------------------------------------------
const formLabelWidth = '140px'
//请假单实体
const form = reactive({
    "id":0,
    "name":useinfo.UserInfo.UserName,
  "departId": useinfo.UserInfo.departId,
  "excusedType": 0,
  "startDateTime": "",
  "endDateTime": "",
  "totalHour": 0,
  "backDateTime": "",
  "reason": "",
  "leaderName": "",
  "uid": useinfo.UserInfo.Uid,
  "remark": 0,
  "whyRefuse": "",
  "isUpdateOrDel": false
})
//中间实体
const logic=reactive({
    opens:false,
    titles:'',
})
//打开对话框
const open=(name:string,row:any)=>{
  logic.titles=name
    getdepartData()
    getTypeData()
    getleader()
    logic.opens=true;
    
    if(logic.titles=="修改"||logic.titles=="审批"){
      form.id=row.id
      form.name=row.name
      form.departId=row.departId
      form.excusedType=row.excusedType
      form.startDateTime=row.startDateTime
      form.endDateTime=row.endDateTime
      getDay()
      form.backDateTime=row.backDateTime
      form.reason=row.reason
      form.uid=row.uid
    }else{
       form.name=useinfo.UserInfo.UserName,
      form.departId= useinfo.UserInfo.departId,
      form.excusedType=0
      form.startDateTime=""
      form.endDateTime=""
      form.totalHour=0
      form.backDateTime=""
      form.reason=""
    }

}
//获取总天数
const getDay=()=>{
  var a=moment(form.endDateTime)
  var b=moment(form.startDateTime)
  const days=a.diff(b,'days')
  form.totalHour=days
  console.log(a.diff(b,'days'))
}

//添加请假单
const saveExcused=()=>{
  if(moment(form.startDateTime).isAfter(form.endDateTime)||moment(form.startDateTime).isSame(form.endDateTime)){
    ElMessage.error("开始时间不能晚于结束时间以及开始时间和结束时间不能相同")
    return
  }
  if(form.reason.length>140){
    ElMessage.error("原因最多140个字符")
    return
  }
  if(logic.titles=="请假申请"){
    writeBasic.post("api/Excused/AddExcused",form).then(res=>{
      if(res.data.code==200){
        ElMessage.success("保存成功")
        gettableData()
        logic.opens=false
      }else{
        ElMessage.error("保存失败")
      }
    })
  }else if(logic.titles=='审批'){
    if(form.remark==2){
      if(form.whyRefuse==""){
        ElMessage.error("必须说明不通过原因")
        return
      }
    }
     writeBasic.post("api/Excused/ShenpiExcused",form).then(res=>{
      if(res.data.code==200){
        ElMessage.success(res.data.message)
        gettableData()
        logic.opens=false
      }else{
        ElMessage.error("保存失败")
      }
    })
  }else{
    writeBasic.post("api/Excused/UpdateOrDelExcused",form).then(res=>{
      if(res.data.code==200){
        ElMessage.success(res.data.message)
        gettableData()
        logic.opens=false
      }else{
        ElMessage.error("保存失败")
      }
    })
  }
}


//部门下拉框
const departData=ref<any>([])
const getdepartData=()=>{
    readBasic.get("api/Excused/GetDepartList").then(res=>{
        departData.value=res.data.data
    })
}
//请假类型
const typeData=ref<any>([])
const getTypeData=()=>{
    readBasic.get("api/Excused/GetTypeList").then(res=>{
        typeData.value=res.data.data
    })
}

//获取部门领导
const getleader=()=>{
  readBasic.get("api/Excused/GetLeder",{params:{
    id:form.departId,
    idList:useinfo.UserInfo.RidList.toString(),
  }}).then(res=>{
    form.leaderName=res.data.data.userName
  })
}

//删除请假单
const Del = (row:any) => {
  ElMessageBox.confirm(
    '确认删除吗?',
    '警告',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      row.isUpdateOrDel=true
      writeBasic.post("api/Excused/UpdateOrDelExcused",row).then(res=>{
      if(res.data.code==200){
        ElMessage.success(res.data.message)
        gettableData()
        logic.opens=false
      }else{
        ElMessage.error("保存失败")
      }
    })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })
}



</script>




<style>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}

.el-popper.is-customized {
  /* Set padding to ensure the height is 32px */
  padding: 6px 12px;
  background: linear-gradient(90deg, rgb(159, 229, 151), rgb(204, 229, 129));
}

.el-popper.is-customized .el-popper__arrow::before {
  background: linear-gradient(45deg, #b2e68d, #bce689);
  right: 0;
}
</style>